<!--
 * @Description: 
 * @version: 
 * @Company: BA
 * @Author: OBKoro1
 * @Date: 2019-08-12 11:21:17
 * @LastEditors: OBKoro1
 * @LastEditTime: 2019-08-12 16:37:57
 -->
<template>
  <header class="header" :style="{background: bg}" ref="header">
    <slot name="left"></slot>
    <span class="header_title">
      <span class="header_title_text ellipsis" :style="{color: color}">{{title}}</span>
    </span>
    <slot name="search"></slot>
    <slot name="right"></slot>
  </header>
</template>

<script>
export default {
  props: {
    title: { type: String },
    color: { type: String },
    bg: { type: String }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/mixins.styl";
  .header
    size(100%, 44px)
    bg(#ffffff)
    position fixed
    left 0
    top 0
    z-index 999
    .header_title
      position absolute
      left 50%
      top 50%
      transform translate(-50%, -50%)
      color #fff
      text-align center
      .header_title_text
        color(#222)
        fz(17px)
        display block
    .header_left, .header_right
      color(#666)
      size(44px, 44px)
      lh(44px)
      center-text()
      position absolute
      top 50%
      transform translateY(-50%)
    .header_left
      left 0
      .iconfont
        fz(25px !important)
      .icon-xuanxiang1, .icon-search1
        color(#fff)
      .icon-arrow-left
        color(#252525)
    .header_right
      right 0
      .iconfont
        fz(24px !important)
      .login
        fz(16px !important)
        color(#fff)
      .icon-three-dot
        color(#252525)
</style>

